/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import {StyleSheet, View, Text, StatusBar} from 'react-native';
import Video from 'react-native-video';
import {videoImmersionList} from '../../components/videos';
import {AdaptiveImmersion} from '@hadss/react_native_adaptive_video';
import {useFocusEffect} from '@react-navigation/native';
import {
  SafeAreaView,
  useSafeAreaInsets,
  useSafeAreaFrame,
} from '@react-native-oh-tpl/react-native-safe-area-context';

const BOTTOM_TAB_HEIGHT = 50; // dp

const VideoDetail = ({route, navigation}): JSX.Element => {
  const insets = useSafeAreaInsets();
  const frame = useSafeAreaFrame();
  console.log(
    `窗口宽vp：${frame.width} 高vp：${frame.height} 宽高比：${(
      frame.width / frame.height
    ).toFixed(2)} 状态栏高度vp：${
      insets.top
    } 底部栏高度vp：${BOTTOM_TAB_HEIGHT}`,
  );
  const {id} = route.params;
  const video = videoImmersionList[id];

  // 调用单例方法获取沉浸规则：传入视频宽高、当前窗口大小、状态栏高度和底部tab组件高度
  const immersionInfo = AdaptiveImmersion.getInstance().getImmersionInfo(
    {width: video.width, height: video.height},
    {width: frame.width, height: frame.height},
    insets.top,
    BOTTOM_TAB_HEIGHT,
  );
  if (!immersionInfo) {
    throw new Error('get immersionInfo failed');
  }

  // 获取视频播放组件的宽高
  const {width: videoWidth, height: videoHeight} = immersionInfo.videoSize;
  // 获取视频播放组件的位置 x,y （相对屏幕左上角）
  const videoPosition = immersionInfo.videoPosition;

  // 获取底部tab栏是否沉浸
  const opacity = immersionInfo.immersionSetting.isBottomTabImmersive
    ? 0.5
    : 1.0;

  // 获取状态栏是否沉浸
  const isStatusBarImmersive =
    immersionInfo.immersionSetting.isStatusBarImmersive;

  useFocusEffect(
    React.useCallback(() => {
      if (isStatusBarImmersive) {
        // 进入页面时设置状态栏是否沉浸
        StatusBar.setBarStyle('light-content');
        StatusBar.setTranslucent(true);
        StatusBar.setBackgroundColor('transparent');
      }

      return (): void => {
        if (isStatusBarImmersive) {
          // 退出页面时重置状态栏
          StatusBar.setBarStyle('dark-content');
          StatusBar.setTranslucent(false);
          StatusBar.setBackgroundColor('#ffffff');
        }
      };
    }, [isStatusBarImmersive]),
  );

  return (
    <SafeAreaView style={{flex: 1, position: 'relative'}}>
      <Video
        style={{
          position: 'absolute',
          width: videoWidth, // 设置视频播放组件宽度
          height: videoHeight, // 设置视频播放组件高度
          left: videoPosition.x, // 设置视频播放组件 x 坐标
          top: videoPosition.y, // 设置视频播放组件 y 坐标
          zIndex: 1,
        }}
        source={video.source}
        resizeMode="contain"
        controls={false}
        onError={(error): void => console.log('Video error:', error)}
        repeat={true}
      />
      <View
        style={{
          height: BOTTOM_TAB_HEIGHT,
          width: '100%',
          opacity: opacity,
          backgroundColor: '#999',
          justifyContent: 'center',
          alignItems: 'center',
          position: 'absolute',
          bottom: 0,
          zIndex: 2,
        }}>
        <Text style={styles.myTabText}>底部Tab栏</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  myTabText: {
    fontSize: 18,
    color: 'red',
  },
});
export default VideoDetail;
